<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-button
        type="primary"
        size="medium"
        class="m-bottom-15"
        icon="el-icon-circle-plus-outline" 
        @click="dialogVisible = true"
        >新增信号</el-button
      >
      <el-table border
        :data="tableData"
        
        style="width: 100%"
        class="m-bottom-15"
      >
        <!-- @row-click="singleElection" -->
        <!-- <el-table-column type="selection" min-width="50">
                </el-table-column> -->
        <!-- <el-table-column prop="" label="" min-width="100">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.id">
                            <el-radio :label="scope.row.id"></el-radio>
                        </el-radio-group>
                    </template>
</el-table-column> -->
        <el-table-column align="center" width="55" label="">
          <template slot-scope="scope">
            <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
            <el-radio
              class="radio"
              v-model="radioSelect"
              :label="scope.row.id"
              @change="tableRadio"
              >&nbsp;</el-radio
            >
          </template>
        </el-table-column>

        <el-table-column prop="id" label="信号ID" sortable min-width="100">
        </el-table-column>
        <el-table-column
          prop="traderSignalName"
          label="信号名称"
          sortable
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="订阅账户名称"
          sortable
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="dataFactoryName"
          label="数据场"
          sortable
          min-width="120"
        >
        </el-table-column>
        <el-table-column prop="signalType" label="信号类型" min-width="200">
          <template slot-scope="scope">
            <!-- <el-button size="mini"  v-if="scope.row.status == 1">启用</el-button>
                        <el-button size="mini" type="danger" v-if="scope.row.status == 2">停用</el-button> -->
            <el-select
              disabled
              v-model="scope.row.signalType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in signalTypeList"
                :key="item.id"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- 信号状态 -->
        <el-table-column
          prop="status"
          label="信号状态"
          sortable
          min-width="100"
        >
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="primary" v-if="scope.row.status == 1">启用</el-button>
                        <el-button size="mini" type="danger" v-if="scope.row.status == 2">停用</el-button> -->
            <el-button
              size="mini"
              :type="scope.row.status == 1 ? 'primary' : 'danger'"
              @click="statusButton(scope.row)"
              >{{ scope.row.status == 1 ? "启用" : "停用" }}</el-button
            >
          </template>
        </el-table-column>
        <!-- <el-table-column prop="" label="信号类型" sortable min-width="100">
                </el-table-column> -->
        <el-table-column
          prop="subscribersTraderAccountNum"
          label="勾选交易员数"
          sortable
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          sortable
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="brokerage"
          label="概率豆费用"
          sortable
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="currentSubscribers"
          label="订阅人数"
          sortable
          min-width="100"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" @click="showEdite(scope.row)"
                >编辑</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block m-bottom-15">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- 交易员 -->
      <div>
        <div class="flex_left m-bottom-15">
          <el-input
            v-model="inputTradeId"
            type="text"
            placeholder="跟单ID"
            class="input_wh m_right_15"
          ></el-input>
          <el-input
            v-model="inputTradeName"
            type="text"
            placeholder="交易员姓名"
            class="input_wh m_right_15"
          ></el-input>

          <el-select
            v-model="value2"
            placeholder="启用/下线"
            clearable
            class="m_right_15"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button
            icon="el-icon-search"
            type="primary"
            circle
            @click="searchTable2"
          ></el-button>
        </div>

        <!-- 表格数据2 -->
        <el-table border
          :data="tableData2"
          border
          style="width: 100%"
          class="m-bottom-15"
        >
          <el-table-column prop="id" label="跟单ID" sortable min-width="100">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="交易员姓名"
            sortable
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="启用/下线"
            sortable
            min-width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">启用</span>
              <span v-if="scope.row.status == 2">下线</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="strategy"
            label="订阅方向"
            sortable
            min-width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.strategy == 1">正</span>
              <span v-if="scope.row.strategy == 2">反</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="multiple"
            label="订阅倍数"
            sortable
            min-width="100"
          >
          </el-table-column>
        </el-table>

        <div class="block m-bottom-15">
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="currentPage2"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit2"
            layout="total, sizes, prev, pager, next"
            :total="total2"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>

    <!-- 新增信号弹窗 -->
    <el-dialog title="新增信号" :visible.sync="dialogVisible" width="30%">
      <div class="dialog_box">
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>信号名称</span></div>
          <div>
            <el-input v-model="signName" placeholder="信号名称"></el-input>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>账户ID</span></div>

          <!-- 更改下拉框 -->
          <div>
            <!-- <el-input v-model="tradeIdObj2.nickName" placeholder="请选择账户Id" size="70%"
                            @focus="gettradeId()"></el-input> -->

            <UserSearchable
              v-model="tradeIdObj2.traderAccountId"
              :label="tradeIdObj2.nickName"
              :type="'traderaccount'"
              :params="{ status: 1 }"
            >
              <template #dropdownTitle>
                <span>ID</span>
                <span>昵称</span>
                <span>手机号</span>
              </template>
              <template v-slot:dropdown="{ item }">
                <span>{{ item.traderAccountId }}</span>
                <span>{{ item.nickName }}</span>
                <span>{{ item.phone }}</span>
              </template>
            </UserSearchable>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>状态</span></div>
          <div>
            <el-select v-model="status" placeholder="请选择" class="m_right_15">
              <el-option
                v-for="item in statusArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>概率豆费用</span></div>
          <div>
            <el-input v-model="brokerage" placeholder="概率豆费用"></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSignal()">保 存</el-button>
      </span>
    </el-dialog>

    <!-- 账户ID弹窗 -->
    <el-dialog
      title="请选择"
      :visible.sync="dialogVisible3"
      width="50%"
      top="10vh"
    >
      <div class="flex_left">
        <el-input
          v-model="diaAcountName"
          placeholder="请输入账户名称/电话号码"
          size="small"
          class="input-wh"
        ></el-input>
        <!-- <el-input v-model="diaAcountPhone" placeholder="请输入电话号码" size="small" class="input-wh"></el-input> -->
        <el-button icon="el-icon-search" size="small" @click="searchdiaAcount"
          >搜索</el-button
        >
      </div>

      <el-table border
        ref="singleTable"
        :data="tableData3"
        highlight-current-row
        @row-click="handleCurrentChangeSelect3"
        style="width: 100%"
        max-height="450"
      >
        <el-table-column prop="traderAccountId" label="账户ID" min-width="100">
        </el-table-column>
        <el-table-column prop="nickName" label="账户名称" min-width="100">
        </el-table-column>
        <el-table-column prop="phone" label="电话号码" min-width="100">
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange3"
          @current-change="handleCurrentChange3"
          :current-page="currentPage3"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit3"
          layout="total, sizes, prev, pager, next"
          :total="total3"
        >
        </el-pagination>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="saveTradeIds">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑信号弹窗 -->
    <el-dialog title="编辑信号" :visible.sync="dialogVisible2" width="30%">
      <div class="dialog_box">
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>信号名称</span></div>
          <div>
            <el-input
              v-model="editObj.traderSignalName"
              placeholder="信号名称"
            ></el-input>
          </div>
        </div>
        <!-- 暂时禁用 -->
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>账户ID</span></div>
          <div>
            <el-select
              v-model="editObj.userName"
              placeholder="请选择"
              class="m_right_15"
              disabled
            >
              <el-option
                v-for="item in userIdNumber"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>状态</span></div>
          <div>
            <!-- <el-select v-model="editObj.status" placeholder="请选择" class="m_right_15">
                            <el-option v-for="item in statusArr" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select> -->
            <el-radio-group v-model="editObj.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">停用</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>概率豆费用</span></div>
          <div>
            <el-input
              v-model="editObj.brokerage"
              placeholder="概率豆费用"
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveEditTrade">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";

import UserSearchable from "@/components/UserSearchable";
import { getDictData } from "@/api/transaction";

import {
  tradeSign,
  tradermysignal,
  getTradeSignList,
  editTraderMySignal,
  getTMyList,
  getTradeFollowList,
} from "@/api/user";

export default {
  name: "realTimeMonitor",

  // "element-ui": "2.13.0",  二版本

  components: {
    UserSearchable,
  },

  data() {
    return {
      // 饼图数据
      pieData: [],
      signalType: [],
      tableData: [
        {
          brokerage: 10,
          createBy: "yyy",
          createTime: "2018",
          currencyId: "CNY",
          dataFactoryName: "数据场",
          delBy: "删除者",
          delFlag: "1",
          delTime: "2059",
          id: 1,
          remark: "描述",
          status: 1,
          traderAccountId: 0,
          traderSignalName: "信号名称",
          updateBy: "更新者",
          updateTime: "2019",
          userName: "交易员名称",
        },
      ],

      tableData2: [
        {
          brokerage: 0,
          createBy: "yyy",
          createTime: "2018",
          currencyId: "CNY",
          dataFactoryName: "数据场",
          delBy: "删除者",
          delFlag: "1",
          delTime: "2059",
          id: 1,
          remark: "描述",
          status: 1,
          traderAccountId: 0,
          traderSignalName: "信号名称",
          updateBy: "更新者",
          updateTime: "2019",
          userName: "交易员名称",
        },
      ],

      tableData3: [
        {
          traderAccountId: 1,
          nickName: "哈哈",
          phone: "",
        },
      ],
      currentRow: null,

      diaAcountName: "",
      diaAcountPhone: "",

      tradeIdObj: {},
      tradeIdObj2: {},

      // 分页
      currentPage: 1,
      total: 0,
      limit: 10,

      currentPage2: 1,
      total2: 0,
      limit2: 10,

      currentPage3: 1,
      total3: 0,
      limit3: 10,

      // 交易员
      inputTradeId: "",
      inputTradeName: "",

      options: [
        {
          value: "选项1",
          label: "在职",
        },
        {
          value: "选项2",
          label: "离职",
        },
      ],
      value: "",

      options2: [
        {
          value: 1,
          label: "启用",
        },
        {
          value: 2,
          label: "下线",
        },
      ],
      value2: "",

      // 新增信号
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      signName: "",
      brokerage: "",
      userId: "",

      userIdNumber: [
        {
          value: "选项1",
          label: "1",
        },
        {
          value: "选项2",
          label: "2",
        },
        {
          value: "选项3",
          label: "3",
        },
      ],

      statusArr: [
        {
          value: 1,
          label: "启用",
        },
        {
          value: 2,
          label: "停用",
        },
      ],
      status: "",

      //编辑信号
      editObj: {},

      radioSelect: "",
    };
  },
  mounted() {
    this.getData();
    this.getDict();
  },

  methods: {
    // 表格1数据请求
    getData() {
      let that = this;
      let data = {};
      data.limit = that.limit;
      data.page = that.currentPage;

      getTMyList(data)
        .then((res) => {
          console.log(res);
          that.limit = res.limit;
          that.total = res.total;
          that.currentPage = res.page;
          that.radioSelect = res.list[0].id;

          that.tableData = res.list;

          that.getData2();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 表格二数据
    getData2() {
      let that = this;
      let obj = {};
      obj.limit = that.limit2;
      obj.page = that.currentPage2;
      obj.signalId = that.radioSelect;

      getTradeFollowList(obj)
        .then((res) => {
          console.log("表格2", res);
          that.limit2 = res.limit;
          that.total2 = res.total;
          that.currentPage2 = res.page;

          that.tableData2 = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDict() {
      getDictData("yj_controls_type")
        .then((res) => {
          console.log("字典变量数据", res);
          this.signalTypeList = res;
        })
        .catch((res) => {
          console.log(res);
        });
    },
    addSignal() {
      let that = this;
      if (that.signName == "") {
        that.$message.warning("请输入信号名称");
        return;
      }
      if (
        that.tradeIdObj2.traderAccountId == "" ||
        that.tradeIdObj2.traderAccountId == undefined
      ) {
        that.$message.warning("请选择账户Id");
        return;
      }
      if (that.status == "") {
        that.$message.warning("请选择状态");
        return;
      }
      if (that.brokerage == "") {
        that.$message.warning("请输入概率豆费用");
        return;
      }

      let data = {
        brokerage: 0,
        createBy: "",
        createTime: "",
        currencyId: "",
        delBy: "",
        delFlag: "",
        delTime: "",
        id: "",
        remark: "",
        status: 1,
        traderAccountId: "",
        traderSignalName: "",
        updateBy: "",
        updateTime: "",
      };
      data.traderSignalName = that.signName;
      data.traderAccountId = that.tradeIdObj2.traderAccountId;
      data.status = that.status;
      data.brokerage = that.brokerage;

      console.log("当前添加的对象：", data);

      tradermysignal(data)
        .then((res) => {
          // 此处数据打印不出来？？？
          console.log(JSON.parse(JSON.stringify(res)));

          that.getData();

          that.dialogVisible = false;
          that.$message.success("新增成功!");
          // 清空数据
          that.signName = "";
          that.tradeIdObj2 = {};
          that.status = "";
          that.brokerage = "";
        })
        .catch((err) => {
          console.log(err);
        });
    },

    gettradeId() {
      let that = this;

      that.dialogVisible3 = true;

      let data = {};
      data.limit = that.limit3;
      data.page = that.currentPage3;

      getTradeSignList(data)
        .then((res) => {
          console.log(res);

          that.limit3 = res.limit;
          that.total3 = res.total;
          that.currentPage3 = res.page;

          that.tableData3 = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleCurrentChangeSelect3(val) {
      let that = this;
      that.currentRow = val;
      console.log(val);
      let obj = {};

      obj.traderAccountId = val.traderAccountId;
      obj.nickName = val.nickName;

      console.log("当前交易对象ID：", obj);
      that.tradeIdObj = obj;
    },
    saveTradeIds() {
      let that = this;
      that.tradeIdObj2 = that.tradeIdObj;
      console.log(that.tradeIdObj2);
      that.dialogVisible3 = false;
    },

    formatter(row, column) {
      return row.address;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      let that = this;
      that.limit = val;
      that.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let that = this;
      that.currentPage = val;
      that.getData();
    },

    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);

      let that = this;
      that.limit2 = val;
      that.getData2();
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      let that = this;
      that.currentPage2 = val;
      that.getData2();
    },

    handleSizeChange3(val) {
      console.log(`每页 ${val} 条`);

      let that = this;
      that.limit3 = val;
      that.gettradeId();
    },
    handleCurrentChange3(val) {
      console.log(`当前页: ${val}`);
      let that = this;
      that.currentPage3 = val;
      that.gettradeId();
    },

    showEdite(obj) {
      console.log(obj);
      let that = this;
      that.editObj = JSON.parse(JSON.stringify(obj));
      that.dialogVisible2 = true;
    },
    saveEditTrade() {
      let that = this;
      console.log(that.editObj);
      let obj = that.editObj;
      if (obj.traderSignalName == "") {
        that.$message.warning("请输入交易信号名称！");
        return;
      }
      if (obj.status == "") {
        that.$message.warning("请选择状态");
        return;
      }
      if (obj.brokerage == "") {
        that.$message.warning("请输入概率豆费用！");
        return;
      }

      // editTraderMySignal(obj).then(res => {
      //     console.log(res)
      // }).catch(res => {
      //     console.log(res)
      // })

      editTraderMySignal(obj)
        .then((res) => {
          console.log("编辑成功！", res);
          that.$message.success("修改成功！");
          that.getData();
          that.dialogVisible2 = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleChangeGroup(value) {
      console.log("当前选中的label：", value);
    },

    statusButton(e) {
      console.log(e);
      let that = this;
      if (e.status == 1) {
        e.status = 2;
      } else {
        e.status = 1;
      }

      editTraderMySignal(e)
        .then((res) => {
          console.log("成功！", res);
          that.$message.success("修改成功！");
          that.getData();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    searchdiaAcount() {
      let that = this;
      console.log("手机号和电话号码：", that.diaAcountName);
      let obj = {};
      obj.userName = that.diaAcountName;

      getTradeSignList(obj)
        .then((res) => {
          console.log("查询成功", res);
          // that.limit2 = res.limit
          // that.total2 = res.total
          // that.currentPage2 = res.page
          that.tableData3 = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    tableRadio(e) {
      let that = this;
      console.log(e);
      that.radioSelect = e;
      that.getData2();
    },

    searchTable2() {
      let that = this;
      let obj = {};
      obj.signalId = that.radioSelect;
      obj.id = that.inputTradeId;
      obj.userName = that.inputTradeName;
      obj.status = that.value2;

      getTradeFollowList(obj)
        .then((res) => {
          console.log("搜索成功:", res);
          that.limit2 = res.limit;
          that.total2 = res.total;
          that.currentPage2 = res.page;

          that.tableData2 = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.m-bottom-15 {
  margin-bottom: 15px;
}

.flex_left {
  display: flex;
  justify-content: flex-start;
}

.input_wh {
  width: 150px;
}

.m_right_15 {
  margin-right: 15px;
}

::v-deep .el-checkbox__inner {
  border-radius: 50%;
  /* 设置选择框为圆形 */
}

.dialog_box {
  padding: 20px;
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  // width: 100%;
}

.flex_center > div {
  width: 30%;
}

.flex_center div:last-child {
  width: 100%;
}

.box_left span:first-child {
  color: red;
  margin-right: 3px;
}

.box_left span:last-child {
  font-weight: bold;
}

.input-wh {
  width: 200px;
  text-align: center;
  margin-right: 15px;
}
</style>
